<template>
	<view class="container-robot" style="background: url(/static/imgbgc3.png) no-repeat; background-size: 100%">
		<!-- <u-navbar
			title=""
			:placeholder="true"
			:autoBack="true"
			bgColor="transparent"
		>
		</u-navbar> -->
		<view class="main">
			<view class="item-robot flex" v-for="(item,index) in list" :key="item.id">
				<!-- <view class="lt">
					<image :src="$fun.imgUrl(item.image)" mode=""></image>
				</view> -->
				<view class="rt">
					<view class="title">{{item.name}}</view>
					<rich-text :nodes="item.content"></rich-text>
					<view class="num1">{{$t('levelInfo.name2')}}:{{item.num}}</view>
					<view class="flex-between">
						<view class="">
							<view class="price1">{{$t('levelInfo.name1')}}: <text >{{item.money}}</text> </view>
							<view class="price2">{{$t('levelInfo.name3')}}:{{$u.timeFormat(item.start_time, 'yyyy-mm-dd')}}~{{$u.timeFormat(item.end_time, 'yyyy-mm-dd')}}</view>
						</view>
						<view class="">
							<u-button type="primary" :text="$t('vnode.name14')" shape="circle" style="width: 160rpx;"
								color="#00A3FF" size="small" @click="handlePay(item)"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<pay-board ref="payJP" :showBoard="showBoard" :priceText="money+''" @complete="complete" @closeBorad="handleModel"></pay-board>
	</view>
</template>

<script>
	import PayBoard from '@/components/xiaojia-keyBoard/xiaojia-keyBoard.vue'
	export default {
		components:{ 
			PayBoard
		},
		data() {
			return {
				list:[],
				show:false,
				isitem:{},
				num:'',
				showBoard:false,
				money:0
			}
		},
		onReady() {
			
		},
		onLoad(options) {
			this.getlevelInfo()
			uni.setNavigationBarTitle({
				title: options.name
			})
		},
		onShow() {
			
		},
		methods: {
			getlevelInfo(){
				this.$fun.ajax.post('product/levelInfo', {}).then(res => {
					if (res.code == 1) {
						this.list=res.data
					}
				})
			},
			handlePay(item){
				this.show=false
				uni.showModal({
					title: this.$t('levelInfo.name4'),
					content: this.$t('levelInfo.name5')+item.name,
					success: (res) => {
						if (res.confirm) {
							this.isitem=item
							this.showBoard=true
							this.money=item.money
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			handleModel(){
				this.showBoard=false
			},
			complete(data){
				this.$fun.ajax.post('product/levelPay', {
					id: this.isitem.id,
					paypwd: data
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else {
						this.$fun.msg(res.msg)
					}
					this.handleModel()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container-robot {
		height: 100%;

		.popup-box {
			height: 500rpx;
			padding: 0 30rpx;

			.title {
				text-align: center;
				padding: 20rpx 0;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #232323;

			}

			.input {
				margin-top: 80rpx;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #d9d9d9;
			}

			.text {
				font-size: 24rpx;
				color: #b9b9b9;
			}

			.btn {
				margin-top: 80rpx;
			}
		}

		.main {
			padding: 30rpx;

			.item-robot {
				// height: 190rpx;
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin: 20rpx 0;

				.lt {
					width: 128rpx;
					height: 100%;
					margin-right: 20rpx;

				}

				.rt {
					flex: 1;
					.title{
						margin-bottom: 20rpx;
					}
					// & view:nth-child(1) {
					// 	font-family: PingFang SC, PingFang SC;
					// 	font-weight: bold;
					// 	font-size: 32rpx;
					// 	color: #232323;
					// 	line-height: 38rpx;
					// }

					// & view:nth-child(2) {
					// 	font-family: PingFang SC, PingFang SC;
					// 	font-weight: 400;
					// 	font-size: 24rpx;
					// 	color: #939393;
					// }
					.num1{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #939393;
						margin: 20rpx 0;
					}
					.price {
						font-family: DIN, DIN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF4201;
						line-height: 56rpx;
					}
					.price1{
						font-size: 32rpx;
						color: #666;
						text{
							font-size: 36rpx;
							color: #FF4201;
						}
					}
					.price2{
						font-size: 24rpx;
						color: #939393;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>